<template>
  <div style="height: 100%;background-color:white ;padding: 5px">
    <div>
      <div style="display: inline-block">
        <el-button icon="el-icon-back" type="text" @click="goBack">返回</el-button>
      </div>
      <div>
        <el-row>
          <el-col :span="24">
            <el-row>
              <el-col :span="16">
                <el-button plain size="small" type="success" @click="syncAll">全量推送</el-button>
              </el-col>
              <el-col :span="8">
                <el-input v-model="term.name" placeholder="请输入名称" @keyup.enter.native="advanceConfirm">
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                  <el-button slot="append" :icon="appendIcon" v-on:click="switchAppend"></el-button>
                </el-input>
                <div v-if="showAdvance"
                     id="advance"
                     style="padding: 10px; float: right;">
                  <div style="margin-top: 10px; display: flex;">
                    <div class="advancedSearchLabel">目录分类</div>
                    <div style="width: 217px">
                      <el-input v-model="term.xmlClassify" placeholder="请输入目录分类" size="small"
                                @keyup.enter.native="searchEnterFun($event)"></el-input>
                    </div>
                  </div>
                  <div style="margin-top: 10px; display: flex;">
                    <div class="advancedSearchLabel">状态</div>
                    <div style="display: inline-block; width: 217px">
                      <el-select v-model="term.syncStatus" placeholder="状态" size="small" style="width: 217px;">
                        <el-option
                          v-for="item in CONST.SYNC_STATUS"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div style="margin-top: 30px; right: 10px;">
                    <el-row>
                      <el-col :offset="6"
                              :span="6">
                        <div style="margin-left: 90px;height: 32px; width: 88px;">
                          <el-button size="small"
                                     v-on:click="advanceCancel">取 消
                          </el-button>
                        </div>
                      </el-col>
                      <el-col :offset="2"
                              :span="2">
                        <div style="margin-left: 30px;height: 32px; width: 88px;">
                          <el-button size="small"
                                     v-on:click="reset">重置
                          </el-button>
                        </div>
                      </el-col>
                      <el-col :offset="2"
                              :span="2">
                        <div div
                             style="margin-left: 30px;height: 32px; width: 88px;">
                          <el-button size="small"
                                     type="success"
                                     v-on:click="advanceConfirm">确 定
                          </el-button>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-table :data="termData" :height="tableHeight" border highlight-current-row stripe
                      style="width: 100%;margin-top: 10px">
              <el-table-column label="术语名称" min-width="200" prop="name" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-html="scope.row.name"></span>
                </template>
              </el-table-column>
              <el-table-column label="目录分类" min-width="140" prop="xmlClassify"
                               show-overflow-tooltip></el-table-column>
              <el-table-column label="术语分类" min-width="120" prop="classify" show-overflow-tooltip></el-table-column>
              <el-table-column label="英文名称" min-width="140" prop="englishName" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-html="scope.row.englishName"></span>
                </template>
              </el-table-column>
              <el-table-column label="英文简称" min-width="80" prop="englishAbbr" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-html="scope.row.englishAbbr"></span>
                </template>
              </el-table-column>
              <el-table-column label="同义词" min-width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div v-for="(field, index) in scope.row.termList" :key="index" class="cell el-tooltip">
                        <span>{{ index + 1 }}、{{ field.typeName }}：<span v-html="field.name"></span>
                          <span v-if="field.englishName">(<span v-html="field.englishName"></span>)</span>
                        </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="推送状态" min-width="120" prop="syncStatus">
                <template slot-scope="scope">
                  <span v-if="scope.row.syncStatus === 0" style="color: red">推送失败</span>
                  <span v-else-if="scope.row.syncStatus === 1" style="color: red">消费失败</span>
                  <span v-else-if="scope.row.syncStatus === 3">推送成功</span>
                  <span v-else style="color: #FF8C00">待推送</span>
                </template>
              </el-table-column>
              <el-table-column label="推送时间" min-width="120" prop="operatedTime"></el-table-column>
              <el-table-column label="操作" min-width="140">
                <template slot-scope="scope">
                  <span><el-link type="primary"
                                 @click.prevent="syncSingle(scope.row.originalConceptId)">推送</el-link></span>
                  <span><el-link type="primary"
                                 @click.prevent="detailTermById(scope.row.originalConceptId)">详情</el-link></span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <div style="margin-top: 10px">
            <el-pagination v-if="multiplePages" :page-size="pageSize" :total="totalNum" background
                           layout="total, prev, pager, next, jumper" style="text-align: right;"
                           @current-change="handleCurrentChange"></el-pagination>
          </div>
        </el-row>
      </div>
    </div>
    <el-drawer v-if="dialogVisible" :size="CONST.WORKSPACE_WIDTH + 'px'" :visible="dialogVisible"
               title="详情"
               @close="dialogVisible = false">
      <TermDetail :originalConceptId="originalConceptId"></TermDetail>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-drawer>
  </div>
</template>

<script>
import TermDetail from "./TermDetail";

export default {
  components: {TermDetail},
  name: "Push",
  data() {
    return {
      tableHeight: '',
      termData: [],
      multiplePages: true,
      noData: true,
      totalNum: 0,
      currentPage: 0, // 第几页
      pageSize: 10, // 每页显示的数据个数
      term: {},
      appendIcon: "el-icon-caret-bottom",
      showAdvance: false,
      dialogVisible: false,
      originalConceptId: ''
    }
  },
  methods: {
    getTableData: function () {
      // 如果未选择平台,则无法查出数据
      if (UTIL.isEmpty(this.term.selectedPlatform)) {
        return;
      }
      this.term.currentPage = this.currentPage;
      this.term.pageSize = this.pageSize;
      let param = new URLSearchParams();
      param.append("term", JSON.stringify(this.term));
      this.axios.post('/pmph/action/term/selectSyncList', param).then((response) => {
        this.termData = response.data.termList;
        this.totalNum = response.data.totalNum;
      })
    },
    //返回按钮点击事件
    goBack: function () {
      this.$router.push("/term/bookPush");
    },
    handleCurrentChange: function (val) {
      this.currentPage = val - 1;
      this.getTableData();
    },
    detailTermById: function (originalConceptId) {
      this.originalConceptId = originalConceptId;
      this.dialogVisible = true;
    },
    searchEnterFun(e) {
      const keyCode = window.event ? e.keyCode : e.which;
      if (keyCode === 13) {
        this.currentPage = 0;
        this.getTableData();
      }
    },
    reset() {
      this.term.name = '';
      this.term.xmlClassify = '';
      this.term.syncStatus = '';
    },
    advanceCancel: function () {
      this.showAdvance = false;
    },
    advanceConfirm: function () {
      this.currentPage = 0;
      this.getTableData();
      this.showAdvance = false;
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    syncSingle(originalConceptId) {
      this.term.originalConceptId = originalConceptId;
      this.syncToPlatform();
    },
    syncAll() {
      this.syncToPlatform();
    },
    syncToPlatform() {
      this.axios.post('/pmph/action/term/syncToPlatform', this.term).then(() => {
        this.$message.success('推送任务提交成功, 请稍后查看推送状态');
      })
    }
  },
  beforeRouteLeave(to, from, next) {
    // 列表页面跳转到 详情页时，设置需要缓存
    if (to.name == 'BookPush') {
      to.meta.isUseCache = true
    }
    next()
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 230;
    this.term.termBookMetadataId = this.$route.query.id;
    this.term.selectedPlatform = this.$route.query.selectedPlatform;
    this.getTableData();
  }
}
</script>

<style scoped>
</style>
